<template>
    <div class="medicine">
        <el-card class="main">
            <div class="topBtn">
                <div class="left">
                    <el-button type="success" size="small" @click="addMedicine">
                        <i class="el-icon-plus"></i>
                        新增</el-button>
                    <el-button type="info" size="small" @click="resetList">
                        <i class="el-icon-refresh-left"></i>
                        重置</el-button>
                </div>
                <!-- <div class="right">
                    <el-input placeholder="请输入内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="normalSearch"></el-button>
                    </el-input>
                </div> -->

            </div>
            <!-- 药品分类列表 -->
            <div class="medicineList">
                <el-table :data="tableData"
                    style="width: 100%; margin-bottom: 20px;" row-key="id" border
                    default-expand-all
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column prop="createTime" label="日期" sortable
                        width="180">
                    </el-table-column>
                    <el-table-column prop="drugTypeName" label="名称" width="280">
                    </el-table-column>
                    <el-table-column prop="show" label="显示">
                        <template slot-scope="scope">
                            <el-switch v-if="scope.row.show == 0" :value="true"
                                active-color="#13ce66" inactive-color="#ccc">
                            </el-switch>
                            <el-switch v-if="scope.row.show == 1" :value="false"
                                active-color="#13ce66" inactive-color="#ccc">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" sortable width="180">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="380"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini">上移</el-button>
                            <el-button type="info" size="mini">下移</el-button>
                            <el-button type="primary" size="mini"
                                @click="goChange(scope.row)">修改</el-button>
                            <el-button type="danger" size="mini"
                                v-if="scope.row.drugTypePid != 0"
                                @click="deleteMed(scope.row.id)">
                                删除
                            </el-button>
                            <el-button type="success" size="mini"
                                v-if="scope.row.drugTypePid == 0" @click="defaultAdd(scope.row)">
                                新增
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <!-- 分页器 -->
                <Pagination :total="total" :pageSize="pageSize"
                    @getPagination="getPagination"></Pagination>
            </div>
        </el-card>

    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
    name: '',
    data() {
        return {
            //分页器
            total: 0,
            currentPage: 1,
            pageSize: 10,
            tableData: [],
        }
    },
    components: {
        Pagination
    },
    created() {
        this.getMedClassList(this.currentPage, this.pageSize)
    },
    methods: {
        //------------重置页面
        resetList(){
            this.getMedClassList(this.currentPage, this.pageSize)
        },
        addMedicine() {
            this.$router.push('/medicine/addClass')
        },
        defaultAdd(row){
            console.log(row);
            this.$router.push({path:'/medicine/addDefaultClass',query:row})
        },
        //-------------------------------进入修改页面
        goChange(row) {
            this.$router.push({ path: '/medicine/editClass', query: row })
        },
        //-------------------------------删除药品
        deleteMed(id) {
            this.$confirm('此操作将删除该种药品分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行删除
                this.deleteConfirm(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async deleteConfirm(id) {
            let res = await this.$api.medicine.deleteMedicine(id)
            console.log('删除单个药品分类接口---', res.data);
            if (res.data.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //更新视图-------------------------
                this.getMedClassList(this.currentPage, this.pageSize)
            } else {
                console.log('删除失败');
                this.$message.error('删除失败');
            }
        },
        //-------------------------------获取点击的页码
        getPagination(page) {
            console.log('----', page);
            this.currentPage = page;
            this.getMedClassList(this.currentPage, this.pageSize);
        },
        //-------------------------------获取药品列表
        async getMedClassList(currentPage, pageSize) {
            let res = await this.$api.medicine.getMedClassList({ currentPage, pageSize })
            console.log(res);
            //列表
            if (res.data.code === 200) {
                // this.tableData = res.data.data.list;
                let arr = res.data.data;
                let tree= this.arrayToTree(arr,0)
                console.log(tree);
                 this.tableData = tree;

                //页码
                this.total = res.data.data.length;
            } else {
                console.log('请求失败');
                this.tableData = []
                this.pageSize = 0;
                this.total = 1;
            }
        },
        //-----------------------------递归扁平转树形
        arrayToTree(arr, rootNode) {
            const tree = []
            arr.forEach(item => {
                if (item.drugTypePid == rootNode) {
                    // 找到根节点之后, 就去找下面有没有对应的子节点
                    const children = this.arrayToTree(arr, item.id)
                    // 如果 children 的长度大于0, 说明找到了子节点
                    children.length > 0 ? (item.children = children) : 0
                    tree.push(item) // 将内容加入数组中
                }
            })
            return tree
        },
        //父类底色
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex == 1) {

                return 'warning-row';
            }
            return '';
        },
        //查找
    }
}
</script>

<style lang="less" scoped>
.medicine {
    .main {
        background-color: rgba(128, 128, 128, 0.1);

        .topBtn {
            border-top: 3px solid #ccc;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 5px 10px;
            background-color: #fff;
        }
    }
}

/deep/ .el-table__row {
    background-color: #fafad2;
}

/deep/ .el-table__row--level-1 {
    background-color: #fff;
}
</style>